<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用CompositionAPI开发todolist</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    const app = Vue.createApp({
        template: `
          <div>
            <div>
              <input :value="inputVal" @input="handleInputValueChange"/>
              <div>{{inputVal}}</div>
              <button @click="handleSubmit">提交</button>
            </div>
            <ul>
              <li v-for="item in list">{{item}}</li>
            </ul>
          </div>
        `,
        setup(props,{emit,slots,attrs}){
            const {ref,reactive} = Vue;
            const inputVal = ref('123')
            const list = reactive([])
            function handleInputValueChange(e){inputVal.value = e.target.value}
            function handleSubmit(){list.push(inputVal.value);inputVal.value=''}
            return {list,inputVal,handleInputValueChange,handleSubmit}
        }
    });
    const vm = app.mount("#app");
</script>
</body>
</html>